Dynamically Changing a Button's Code

IN THIS PAGE

Find a Group Name
Changing an Event

Description

You can use the $e.removeGroup() and $e.add() functions to alter the javascript code that happens after a button is clicked. This allows you to create buttons that execute different blocks of code when they are clicked a second or third time, etc. This guide describes how to to do this.

Dynamically changing code on a button is also described in this video.

Find a Group Name

When you create a button control, that control should have a group name automatically generated for it. This name is not visible directly, but is easy to find if you run the component in a browser and then view the html source page.

In the UX Builder on the UX Controls page open the 'Other Controls' menu. Click on the [Button] option to add a button control to the component.
Highlight the button control in the controls tree. In the button's properties list on the right, scroll down to the 'Javascript - (Touch, Mouse, Pointer Events)' section. Click the [...] button next to the 'click' property.
In the 'Edit Click Event' dialog select the 'Text mode' radio button option and add the following javascript alert. Click Save.
```
alert('message1');
```
Run the component in Firefox.
When you press the button the alert should fire. Left click on the browser page in Firefox and select 'View Page Source'
Click on the browser's 'Menu' button and select 'Find'.
A search textbox should open at the bottom of the browser screen. Type 'message1' into the box and click the 'Enter' key. This will locate where the javascript alert is defined.
You should see something close to this:
```
$e.add('DLG1.V.R1.BUTTON_1',A5.d.evnts.click,function(e) {
alert('message1');
},this,false,'DLG1.V.R1.BUTTON_1');
```
The $e.add() function allows you to add an event to a single or multiple HTML elements. In this example, that HTML element is a button control. In this case Alpha Anywhere created the $e.add() function when the 'click' event was defined.
Here the group name is 'DLG1.V.R1'.

Changing an Event

You can dynamically change the code that is run when the button that is defined above is clicked on. As the example above demonstrates, the group name is defined in the HTML that is generated when the component is run. You can use this group name to remove events as well as add them. Once this is done, a new event can then be added to that group name. This code can be added in any number of places. In the example below, it will be tied to another button control.

Continuing from the section above, return to the component's Design tab in Alpha Anywhere. On the UX Controls page open the 'Other Controls' menu and click on the [Button] option to add a second button to the component.
Highlight the second button in the controls tree. In the properties list on the right, go to the 'Button Properties' section and change the text to read 'New Event'.
Scroll down the 'New Event' button's properties list to the 'Javascript - (Touch, Mouse, Pointer Events)' section and click the [...] button next to the 'click' property.
In the 'Edit Click Event' dialog select the 'Text mode' radio button option and add the following javascript to the event definition. Click the Save button.
```
$e.removeGroup('DLG1.V.R1.BUTTON_1');
$e.add('DLG1.V.R1.BUTTON_1',A5.d.evnts.click,function(e) {
alert('message2');
},this,false,'DLG.V.R1.BUTTON_1');
```
In this code the $e.removeGroup() function is removing the first group definition. A new group definition is then added using the $e.add() function. This new group contains a new javascript alert. When this code is executed the new alert, 'message2', will run if the button is clicked on.
Run the component in Live Preview. Click on the first 'Button'. You should see it display 'message1'.
Now click on the 'New Event' button to run the code to dynamically change the event definition in the first button.
Click on the first button again. The alert should now read 'message2'.